<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 	思路1：宽高与边框倒角一致 */
			div#circle{
				width: 400px;
				height: 400px;
				border: 1px red;
			    border-radius: 50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px red inset;
				
			}
		/* 	思路2：div#d1   css中 抓到div
			               左边框  50像素实现红色
			               右边框  50像素实现黄色
						   下边框  50像素实现黑色
			注意：先别加宽高 transparent  透明色 */
			
						div#triangle{
										width:0;
										/* border-left:50px solid transparent;
										border-right:50px solid transparent;
										border-bottom:50px solid black;
										/* 两行 倒三角 蓝色 透明度 3
										 提醒  所有边框 50px solid transparent
										 上边框颜色改成蓝色  0，0，255
										 */ 
										border: 50px solid transparent;
										border-top-color: rgba(0,0,255,.3);
									}
									/* outline  边框轮廓  只针对input 元素*/
									input{
										outline: 1px solid red;
										
									}
									/* 实际应用：通配选择器 去掉轮廓
									 {outline 0;}
									 
									 */
									
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>